<template>
	<scroll-view scroll-x class="ai-tabs">
		<view v-for="(item,index) in list" :key="index"
			:class="['ai-tabs__item', currentValue === item.value ? 'active' : '']" @tap="onChange(item.value)">
			{{item.label}}
		</view>
	</scroll-view>
</template>

<script setup>
	const props = defineProps({
		value: [String, Number],
		list: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['update:value', 'change'])

	const currentValue = computed({
		get: () => props.value,
		set: val => emit('update:value', val)
	})

	const onChange = (val) => {
		currentValue.value = val
		emit('change', val)
	}
</script>

<style lang="scss">
	.ai-tabs {
		white-space: nowrap;
		padding: 20rpx;
		background: #fff;

		&__item {
			display: inline-block;
			padding: 12rpx 32rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			border-radius: 32rpx;
			background: #F5F5F5;

			&.active {
				color: #fff;
				background: #007AFF;
			}
		}
	}
</style>